<!-- 信息录入 -->
<template>
    <div class="customized">
        <!-- 请选择你的性别 -->
        <div class="sex step" v-show="step==0">
            <div class="title">请选择你的性别</div>
            <div class="list">
                <div @click="setSex('0')" :class="sex == '0' ? 'active':''">
                    <img :src="male" />
                    <div>
                        <span>男性</span>
                        <p>Male</p>
                    </div>
                </div>
                <div @click="setSex('1')" :class="sex == '1' ? 'active':''">
                    <img :src="female" />
                    <div>
                        <span>女性</span>
                        <p>Female</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 请选择你的家庭成员 -->
        <div class="family step" v-show="step==1">
            <div class="title">请选择你的家庭成员</div>
            <ul>
                <li class="active">
                    <span>
                        <img :src="sex == 'male'? family[0]:family[1]" />
                    </span>
                    <span>本人</span>
                    <i></i>
                </li>
                <li @click="familySelect('配偶')" :class="Fselect.includes('配偶') ? 'active':''">
                    <span>
                        <img :src="sex == 'male' ? family[1]:family[0]" />
                    </span>
                    <span>配偶</span>
                    <i></i>
                </li>
                <li @click="familySelect('子女')" :class="Fselect.includes('子女') ? 'active':''">
                    <span>
                        <img :src="family[6]" />
                    </span>
                    <span>子女</span>
                    <i></i>
                </li>
                <li @click="familySelect('父亲')" :class="Fselect.includes('父亲') ? 'active':''">
                    <span>
                        <img :src="family[2]" />
                    </span>
                    <span>父亲</span>
                    <i></i>
                </li>
                <li @click="familySelect('母亲')" :class="Fselect.includes('母亲') ? 'active':''">
                    <span>
                        <img :src="family[3]" />
                    </span>
                    <span>母亲</span>
                    <i></i>
                </li>
                <li @click="familySelect('配偶父亲')" :class="Fselect.includes('配偶父亲') ? 'active':''">
                    <span>
                        <img :src="family[4]" />
                    </span>
                    <span>配偶父亲</span>
                    <i></i>
                </li>
                <li @click="familySelect('配偶母亲')" :class="Fselect.includes('配偶母亲') ? 'active':''">
                    <span>
                        <img :src="family[5]" />
                    </span>
                    <span>配偶母亲</span>
                    <i></i>
                </li>
            </ul>
        </div>
        <!-- 你有几个儿子或女儿 -->
        <div class="children step" v-show="step==2">
            <div class="title">你有几个儿子或女儿?</div>
            <div class="list">
                <div>
                    <span>儿子</span>
                    <van-stepper v-model="children.son" min="0" max="7" />
                </div>
                <div>
                    <span>女儿</span>
                    <van-stepper v-model="children.daughter" min="0" max="7" />
                </div>
            </div>
        </div>

        <!-- 请选择你的家庭成员 -->
        <div class="family step" v-show="step==3">
            <div class="title">你要为谁投保</div>
            <ul>
                <li @click="guanxiSelect('本人')" :class="guanxi.includes('本人') ? 'active':''">
                    <span>
                        <img :src="sex == 'male'? family[0]:family[1]" />
                    </span>
                    <span>本人</span>
                    <i></i>
                </li>
                <li @click="guanxiSelect('配偶')" :class="guanxi.includes('配偶') ? 'active':''">
                    <span>
                        <img :src="sex == 'male' ? family[1]:family[0]" />
                    </span>
                    <span>配偶</span>
                    <i></i>
                </li>
                <li @click="guanxiSelect('父亲')" :class="guanxi.includes('父亲') ? 'active':''">
                    <span>
                        <img :src="family[2]" />
                    </span>
                    <span>父亲</span>
                    <i></i>
                </li>
                <li @click="guanxiSelect('母亲')" :class="guanxi.includes('母亲') ? 'active':''">
                    <span>
                        <img :src="family[3]" />
                    </span>
                    <span>母亲</span>
                    <i></i>
                </li>
                <li @click="guanxiSelect('配偶父亲')" :class="guanxi.includes('配偶父亲') ? 'active':''">
                    <span>
                        <img :src="family[4]" />
                    </span>
                    <span>配偶父亲</span>
                    <i></i>
                </li>
                <li @click="guanxiSelect('配偶母亲')" :class="guanxi.includes('配偶母亲') ? 'active':''">
                    <span>
                        <img :src="family[5]" />
                    </span>
                    <span>配偶母亲</span>
                    <i></i>
                </li>
                <li
                    v-for="(item,index) in children.son"
                    @click="guanxiSelect(`儿子${index+1}`)"
                    :class="guanxi.includes(`儿子${index+1}`) ? 'active':''"
                >
                    <span>
                        <img :src="family[7]" />
                    </span>
                    <span>{{`儿子${index+1}`}}</span>
                    <i></i>
                </li>
                <li
                    v-for="(item,index) in children.daughter"
                    @click="guanxiSelect(`女儿${index+1}`)"
                    :class="guanxi.includes(`女儿${index+1}`) ? 'active':''"
                >
                    <span>
                        <img :src="family[6]" />
                    </span>
                    <span>{{`女儿${index+1}`}}</span>
                    <i></i>
                </li>
            </ul>
        </div>

        <!-- 选择被保人的出生日期 -->
        <div class="shengri step" v-show="step==4">
            <div class="title">选择被保人的出生日期</div>
            <div class="subtitle">注：年龄是决定保费的一大条件哦</div>
            <ul>
                <li v-for="(item,index) in guanxi" :key="index">
                    <span>{{item}}</span>
                    <span @click="currentShengri(item)">
                        {{shengri[index]}}
                        <van-icon name="arrow" />
                    </span>
                </li>
            </ul>
            <van-popup v-model="showdate" position="bottom">
                <van-datetime-picker
                    v-model="currentDate"
                    type="date"
                    :max-date="maxDate"
                    :min-date="minDate"
                    :formatter="formatter"
                    @confirm="dateConfirm"
                />
            </van-popup>
        </div>

        <!-- 被保人既往病史 -->
        <div class="bingshi step" v-show="step==5">
            <div class="title">被保人是否有既往病史？</div>
            <div class="subtitle">注：选择既往病史，淘汰掉不适合投保的产品（不会留拒保记录)</div>
            <van-tabs v-model="tabActive">
                <van-tab v-for="(item,index) in guanxi" :key="index" :title="item">
                    <div class="bingshiList">
                        <ul>
                            <li
                                v-for="(item2,index2) in bingshiArr"
                                :key="index2"
                                @click="setBingshi(index,index2)"
                                :class="bingshi[index].includes(index2) ? 'active':''"
                            >
                                {{item2}}
                                <i></i>
                            </li>
                        </ul>
                    </div>
                </van-tab>
            </van-tabs>
        </div>

        <!-- 收入情况 -->
        <div class="shengri step" v-show="step==6">
            <div class="title">你们的年收入分别是多少？</div>
            <div class="subtitle">注：年收可以计算合理的保险规划预算</div>
            <ul>
                <li v-for="(item,index) in guanxi" :key="index">
                    <span>{{item}}</span>
                    <span @click="currentShouru(item)">
                        {{shouru[index]?shouru[index]:'请选择'}}
                        <van-icon name="arrow" />
                    </span>
                </li>
            </ul>
            <van-popup v-model="showShouru" position="bottom">
                <van-picker :columns="shouruArr" @confirm="onShouruConfirm" show-toolbar />
            </van-popup>
        </div>

        <!-- 职业情况 -->
        <div class="shengri step" v-show="step==7">
            <div class="title">你们的职业分别是什么？</div>
            <div class="subtitle">注：准确的选择职业，淘汰不适合的保险产品</div>
            <ul>
                <li v-for="(item,index) in guanxi" :key="index">
                    <span>{{item}}</span>
                    <span @click="currentZhiye(item)">
                        {{zhiye[index]?zhiye[index].value:'请选择'}}
                        <van-icon name="arrow" />
                    </span>
                </li>
            </ul>
            <van-popup v-model="showZhiye" position="bottom">
                <van-picker :columns="zhiyeArr" @confirm="onZhiyeConfirm" show-toolbar />
            </van-popup>
        </div>

        <!-- 被保人是否有社保？ -->
        <div class="shengri step" v-show="step==8">
            <div class="title">被保人是否有社保？</div>
            <div class="subtitle">注：社保关系到选择产品的报销比例和价格</div>
            <ul>
                <li v-for="(item,index) in guanxi" :key="index">
                    <span>{{item}}</span>
                    <span @click="currentbaozhang(item)">
                        {{baozhang[index]?baozhang[index].value:'请选择'}}
                        <van-icon name="arrow" />
                    </span>
                </li>
            </ul>
            <van-popup v-model="showbaozhang" position="bottom">
                <van-picker :columns="baozhangArr" @confirm="onbaozhangConfirm" show-toolbar />
            </van-popup>
        </div>

        <!-- 被保人是否经常出差？ -->
        <div class="shengri step" v-show="step==9">
            <div class="title">被保人是否经常出差？</div>
            <div class="subtitle">注：出差影响到意外险的选择</div>
            <ul>
                <li v-for="(item,index) in guanxi" :key="index">
                    <span>{{item}}</span>
                    <span @click="currentchuchai(item)">
                        {{chuchai[index]?chuchai[index].value:'请选择'}}
                        <van-icon name="arrow" />
                    </span>
                </li>
            </ul>
            <van-popup v-model="showchuchai" position="bottom">
                <van-picker :columns="chuchaiArr" @confirm="onchuchaiConfirm" show-toolbar />
            </van-popup>
        </div>

        <!-- 被保人是否经常驾车？ -->
        <div class="shengri step" v-show="step==10">
            <div class="title">被保人是否经常驾车？</div>
            <div class="subtitle">注：驾车影响到意外险的选择</div>
            <ul>
                <li v-for="(item,index) in guanxi" :key="index">
                    <span>{{item}}</span>
                    <span @click="currentchuxing(item)">
                        {{chuxing[index]?chuxing[index].value:'请选择'}}
                        <van-icon name="arrow" />
                    </span>
                </li>
            </ul>
            <van-popup v-model="showchuxing" position="bottom">
                <van-picker :columns="chuxingArr" @confirm="onchuxingConfirm" show-toolbar />
            </van-popup>
        </div>

        <!-- 你的家庭贷款情况怎么样 -->
        <div class="loan step" v-show="step==11">
            <div class="title">你的家庭贷款情况怎么样？</div>
            <div class="subtitle">注：贷款情况影响到家庭责任，是筛选寿险重要的指标</div>
            <div class="libg">
                <h2>房贷</h2>
                <ul>
                    <li>
                        <span>总贷款</span>
                        <span @click="currentloan(0)">
                            {{loan.house}}
                            <van-icon name="arrow" />
                        </span>
                    </li>
                    <li>
                        <span>剩余贷款年限</span>
                        <span @click="currentloan(1)">
                            {{loan.houseYears}}
                            <van-icon name="arrow" />
                        </span>
                    </li>
                </ul>
            </div>
            <div class="libg">
                <h2>车贷</h2>
                <ul>
                    <li>
                        <span>总贷款</span>
                        <span @click="currentloan(2)">
                            {{loan.car}}
                            <van-icon name="arrow" />
                        </span>
                    </li>
                    <li>
                        <span>剩余贷款年限</span>
                        <span @click="currentloan(3)">
                            {{loan.carYears}}
                            <van-icon name="arrow" />
                        </span>
                    </li>
                </ul>
            </div>
            <van-popup v-model="showloan" position="bottom">
                <van-picker :columns="loanArr" @confirm="onloanConfirm" show-toolbar />
            </van-popup>
        </div>

        <!-- 家庭每月还贷金额是多少？ -->
        <div class="shengri step" v-show="step==12">
            <div class="title">家庭每月还贷金额是多少</div>
            <div class="subtitle">注：还贷情可以判断保险规划预算是否合理</div>
            <ul>
                <li>
                    <span>每月还贷</span>
                    <span @click="currenthuandai">
                        {{huandai||'请选择'}}
                        <van-icon name="arrow" />
                    </span>
                </li>
            </ul>
            <van-popup v-model="showhuandai" position="bottom">
                <van-picker :columns="huandaiArr" @confirm="onhuandaiConfirm" show-toolbar />
            </van-popup>
        </div>

        <!-- 目前常住地址是哪里？ -->
        <div class="shengri step" v-show="step==13">
            <div class="title">目前常住地址是哪里？</div>
            <ul>
                <li>
                    <span>居住地</span>
                    <span @click="currentaddress">
                        {{address||'请选择'}}
                        <van-icon name="arrow" />
                    </span>
                </li>
            </ul>
            <van-popup v-model="showaddress" position="bottom">
                <van-area :area-list="areaList" @confirm="onaddressConfirm" />
            </van-popup>
        </div>

        <!-- 你的称呼是？ -->
        <div class="shengri step" v-show="step==14">
            <div class="title">你的称呼是？</div>
            <input type="text" placeholder="请填写你的姓名" v-model="userName" class="userName" />
        </div>

        <!-- 你的联系电话是？ -->
        <div class="shengri step" v-show="step==15">
            <div class="title">你的联系电话是？</div>
            <input
                type="number"
                maxlength="11"
                placeholder="请输入你的电话号码"
                v-model="phone"
                class="userName"
            />
        </div>

        <div class="btnBox">
            <button v-if="step==0" class="btn" @click="nextStep">下一步</button>
            <div v-else-if="step<15">
                <span @click="prevStep">
                    <van-icon name="arrow-left" />上一步
                </span>
                <button class="btn btnmin" @click="nextStep">下一步</button>
            </div>
            <div v-else-if="step==15">
                <span @click="prevStep">
                    <van-icon name="arrow-left" />上一步
                </span>
                <button class="btn btnmin" @click="submit" :disabled="isDisable">立刻购买</button>
            </div>
        </div>

        <van-popup v-model="show" position="bottom" class="popup">
            <div class="tit">
                <van-icon name="cross" @click="show=false" />
            </div>

            <div class="list">
                <div class="active">
                    <div class="t">
                        <span>{{getList.mingcheng}}</span>
                        <span>￥{{getList.xianjia}}</span>
                    </div>
                    <div class="b">
                        <p>适合人群：{{getList.shihe}}</p>
                        <p>方案特点：{{getList.tedian}}</p>
                    </div>
                </div>
                <button class="btn" @click="payment">立即支付</button>
            </div>
        </van-popup>
    </div>
</template>

<script>
import wx from "weixin-js-sdk";
import areaList from "@/common/address.js";
export default {
    components: {},
    data() {
        return {
            isDisable: false,
            getList:'',
            show: false,
            male: require("@/assets/male.png"),
            female: require("@/assets/female.png"),
            family: [
                require("@/assets/guanxi/img1.png"),
                require("@/assets/guanxi/img2.png"),
                require("@/assets/guanxi/img3.png"),
                require("@/assets/guanxi/img4.png"),
                require("@/assets/guanxi/img5.png"),
                require("@/assets/guanxi/img6.png"),
                require("@/assets/guanxi/img7.png"),
                require("@/assets/guanxi/img8.png")
            ],
            step: 0, //步骤
            sex: 0, //选择性别
            Fselect: ['自己'], //选择家庭成员
            children: {
                //子女数量
                son: 0,
                daughter: 0
            },
            guanxi: ["本人"], //为谁投保
            //被保人生日
            currentDate: new Date(), //设置日期
            showdate: false,
            setShengri: "", //当前被选中的人
            shengri: ["1985-05-08"], //生日数组
            //被保人既往病史
            tabActive: 0,
            bingshi: [[]],
            bingshiArr: [
                "无",
                "心脏疾病（先天性、冠心病等）",
                "三高（高血压、高血脂、高血糖）",
                "糖尿病",
                "脂肪肝",
                "乙肝病毒携带者（大三阳，小三阳）或甲肝，丙肝",
                "中风；良性肿瘤（子宫肌瘤、纤维瘤）",
                "淋巴结节、甲状腺结节",
                "结石（胆、胆囊、肾等）",
                "息肉（肠、鼻、胆囊等）",
                "精神病（抑郁症、自闭症等）",
                "贫血",
                "胃炎（上表性胃炎，慢性萎缩性胃炎等）",
                "腰间盘突出",
                "乳腺增生、乳腺结节",
                "宫颈炎",
                "过去1年有住院或者手术",
                "其他"
            ],
            //收入情况
            showShouru: false,
            setShouru: "", //当前被选中的人
            shouru: [],
            shouruArr: ['0','1-5万','5-10万','10-20万','20万以上'],
            //职业情况
            showZhiye: false,
            setZhiye: "", //当前被选中的人
            zhiyeArr: [
                "室内轻体力（行政、管理人员）",
                "室内中体力（程序员）",
                "户外简单工作（导游、司机）",
                "户外复杂工作（工程师、建筑工人）",
                "室内制造业（装修、流水线工人）",
                "家庭主妇",
                "学生",
                "其他"
            ],
            zhiye: [],
            //被保人社保情况
            showbaozhang: false,
            setbaozhang: "", //当前被选中的人
            baozhang: [],
            baozhangArr: ["否", "是"],
            //被保人是否经常出差？
            showchuchai: false,
            setchuchai: "", //当前被选中的人
            chuchai: [],
            chuchaiArr: ["否", "是"],
            //被保人是否经常驾车？
            showchuxing: false,
            setchuxing: "", //当前被选中的人
            chuxing: [],
            chuxingArr: ["否", "是"],
            //贷款情况
            showloan: false,
            loan: {
                house: "0万",
                houseYears: "0年",
                car: "0万",
                carYears: "0年"
            },
            loanArr: ['1-20万','20-50万','50-100万','100万以上'],
            //每月还贷情况
            showhuandai: false,
            huandai: "0万",
            huandaiArr: ['1-2千','2-5千','5千-1万','1万以上'],
            //居住地址
            areaList: areaList,
            address: "",
            showaddress: false,
            userName: "",
            phone: "",
            //预约时间
            minHour: 10,
            maxHour: 20,
            minDate: new Date(1940,1,1),
            maxDate: new Date(),
            makeDate: new Date()
        };
    },
    mounted() {
        document.title = "信息登记";
        if(!sessionStorage.getItem('getList')){
            this.$router.replace('/')
        }
        this.zhiye = [];
        this.zhiye.push({
            value: this.zhiyeArr[0],
            index: 0
        });

        this.baozhang = [];
        this.baozhang.push({
            value: this.baozhangArr[0],
            index: 0
        });

        this.chuchai = [];
        this.chuchai.push({
            value: this.chuchaiArr[0],
            index: 0
        });

        this.chuxing = [];
        this.chuxing.push({
            value: this.chuxingArr[0],
            index: 0
        });
    },
    methods: {
        nextStep() {
            //在选择病史时 需要判断是否所有成员都已选择
            if (this.step == 5) {
                let ret = true;
                for (let i in this.bingshi) {
                    if (this.bingshi[i].length == 0) {
                        this.tabActive = Number(i);
                        this.$toast(`${this.guanxi[i]}未填写`);
                        ret = false;
                        break;
                    }
                }
                if (!ret) {
                    return false;
                }
            }
            //判断收入是否填完
            if (this.step == 6) {
                let ret = true;
                for (let i in this.guanxi) {
                    if (!this.shouru[i]) {
                        this.$toast(`${this.guanxi[i]}未填写`);
                        ret = false;
                        break;
                    }
                }
                if (!ret) {
                    return false;
                }
            }
            //判断地址是否填完
            if (this.step == 13 && this.address == "") {
                this.$toast(`居住地址未填写`);
                return false;
            }

            //名称是否填完
            if (this.step == 14 && this.userName == "") {
                this.$toast(`名称未填写`);
                return false;
            }

            if (!this.Fselect.includes("子女") && this.step == 1) {
                this.step = 3; //没有子女的时候跳到第三步
            } else {
                this.step++;
            }
        },
        prevStep() {
            if (!this.Fselect.includes("子女") && this.step == 3) {
                this.step = 1; //没有子女的时候跳到第一步
            } else {
                this.step--;
            }
        },
        setSex(sex) {
            this.sex = sex;
        },
        //选择家庭成员
        familySelect(d) {
            if (this.Fselect.includes(d)) {
                this.Fselect.splice(this.Fselect.indexOf(d), 1);
            } else {
                this.Fselect.push(d);
            }
        },
        //为谁投保
        guanxiSelect(d) {
            
            var num = sessionStorage.getItem("select");
            if (num == 0) {
                this.guanxi.push(d);
                this.guanxi.splice(0, 1);
            }else{
                if (this.guanxi.includes(d) && this.guanxi.length > 1) {
                    this.guanxi.splice(this.guanxi.indexOf(d), 1);
                }else{
                    this.guanxi.push(d);
                }
            }
            

            //设置各种角色的生日和病史数组、收入
            this.bingshi = [];
            this.zhiye = [];
            this.baozhang = [];
            this.chuchai = [];
            this.chuxing = [];
            this.guanxi.forEach((item, index) => {
                if (item == "本人" || item == "配偶") {
                    this.shengri[index] = "1988-05-08";
                } else if (
                    item == "父亲" ||
                    item == "母亲" ||
                    item == "配偶父亲" ||
                    item == "配偶母亲"
                ) {
                    this.shengri[index] = "1965-05-08";
                } else {
                    this.shengri[index] = "2000-05-08";
                }
                this.bingshi.push([]);
                this.zhiye.push({
                    value: this.zhiyeArr[0],
                    index
                });
                this.baozhang.push({
                    value: this.baozhangArr[0],
                    index: 0
                });
                this.chuchai.push({
                    value: this.chuchaiArr[0],
                    index: 0
                });
                this.chuxing.push({
                    value: this.chuxingArr[0],
                    index: 0
                });
            });
        },
        //设置日期格式
        formatter(type, value) {
            if (type === "year") {
                return `${value}年`;
            } else if (type === "month") {
                return `${value}月`;
            } else if (type === "day") {
                return `${value}日`;
            }
            return value;
        },
        //获取日期
        dateConfirm(value) {
            var date = value;
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            value =
                date.getFullYear() + seperator1 + month + seperator1 + strDate;
            this.showdate = false;

            this.shengri[this.guanxi.indexOf(this.setShengri)] = value;
        },
        //设置被选中的人
        currentShengri(d) {
            this.setShengri = d;
            this.showdate = true;
        },
        //病史
        setBingshi(index, index2) {
            if (this.bingshi[index].includes(index2)) {
                this.bingshi[index].splice(
                    this.bingshi[index].indexOf(index2),
                    1
                );
            } else {
                this.bingshi[index].push(index2);
            }
            if (index2 == 0) {
                this.bingshi[index].splice(0, this.bingshi[index].length, 0);
            } else if (this.bingshi[index].includes(0)) {
                this.bingshi[index].splice(0, 1);
            }
        },
        //收入
        currentShouru(d) {
            this.setShouru = d;
            this.showShouru = true;
        },
        onShouruConfirm(value) {
            this.showShouru = false;
            this.shouru[this.guanxi.indexOf(this.setShouru)] = value;
        },
        //职业
        currentZhiye(d) {
            this.setZhiye = d;
            this.showZhiye = true;
        },
        onZhiyeConfirm(value, index) {
            this.showZhiye = false;
            this.zhiye[this.guanxi.indexOf(this.setZhiye)] = {
                value,
                index
            };
        },
        //社保情况
        currentbaozhang(d) {
            this.setbaozhang = d;
            this.showbaozhang = true;
        },
        onbaozhangConfirm(value, index) {
            this.showbaozhang = false;
            this.baozhang[this.guanxi.indexOf(this.setbaozhang)] = {
                value,
                index
            };
        },
        //出差情况
        currentchuchai(d) {
            this.setchuchai = d;
            this.showchuchai = true;
        },
        onchuchaiConfirm(value, index) {
            this.showchuchai = false;
            this.chuchai[this.guanxi.indexOf(this.setchuchai)] = {
                value,
                index
            };
        },
        //驾车情况
        currentchuxing(d) {
            this.setchuxing = d;
            this.showchuxing = true;
        },
        onchuxingConfirm(value, index) {
            this.showchuxing = false;
            this.chuxing[this.guanxi.indexOf(this.setchuxing)] = {
                value,
                index
            };
        },
        //贷款情况
        currentloan(d) {
            if (d == 0) {
                this.loanArr = ['1-20万','20-50万','50-100万','100万以上'];
            }else if( d == 2){
                this.loanArr = ['1-10万','10-20万','20-50万','50万以上'];
            }else if( d == 1){
                this.loanArr = [];
                let nums = 30;
                for(let i=0;i<=nums;i++){
                     this.loanArr.push(i+'年')
                }
            }else if( d == 3){
                this.loanArr = [];
                let nums = 5;
                for(let i=0;i<=nums;i++){
                     this.loanArr.push(i+'年')
                }
            }
            this.setLoan = d;
            this.showloan = true;
        },
        onloanConfirm(value, index) {
            this.showloan = false;
            if (this.setLoan == 0) {
                this.loan.house = value;
            } else if (this.setLoan == 1) {
                this.loan.houseYears = value;
            } else if (this.setLoan == 2) {
                this.loan.car = value;
            } else if (this.setLoan == 3) {
                this.loan.carYears = value;
            }
        },
        //每月还贷
        currenthuandai() {
            this.showhuandai = true;
        },
        onhuandaiConfirm(value) {
            this.huandai = value;
            this.showhuandai = false;
        },
        //居住地址
        currentaddress() {
            this.showaddress = true;
        },
        onaddressConfirm(value) {
            this.address = ''
            value.forEach(item => {
                this.address += item.name + "-";
            });
            this.address = this.address.substring(0, this.address.length - 1);
            this.showaddress = false;
        },
        //提交并整合数据
        submit() {
            this.getList = JSON.parse(sessionStorage.getItem('getList'))
            if (this.phone == "") {
                this.$toast(`手机换号码未填写`);
            } else {
                if (!/^0?1[3|4|5|6|7|8][0-9]\d{8}$/.test(this.phone)) {
                    this.$toast(`请填写正确的手机号码`);
                } else {
                    this.collation();
                }
            }
        },
        collation() {
            //数据整合
            let postData = {
                phone: this.phone, //电话
                sex: this.sex, //性别
                name: this.userName, //称呼
                loan: this.loan, //贷款情况
                huandai: this.huandai, //每月还贷
                address: this.address, //居住地址
                family: this.Fselect.join(','), //家庭成员
                chanpinId:JSON.parse(sessionStorage.getItem('getList')).id,
                totalfee:JSON.parse(sessionStorage.getItem('getList')).xianjia,
                detail: []
            };
            this.guanxi.forEach((item, index) => {
                postData.detail.push({
                    guanxi: item,
                    shengri:this.shengri[index],
                    bingshi:this.bingshi[index].join(','),
                    shouru:this.shouru[index],
                    zhiye:this.zhiye[index].index,
                    baozhang: this.baozhang[index].index,
                    chuchai:this.chuchai[index].index,
                    chuxing:this.chuxing[index].index,
                });
            });
            // postData.detail = JSON.stringify(postData.detail)
            //提交信息
            this.isDisable = true
            this.$api.saveOrder(postData).then(res => {
                this.show = true;
                sessionStorage.setItem("orderid",res.data.orderid)
                this.wxPay = JSON.parse(res.data.jsApiParameters)
                this.isDisable = false
            }).catch(error => {
                
                console.log(error)
            })

        },
        //调用支付接口
        payment() {
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest',this.wxPay,(res)=>{
                if(res.err_msg == "get_brand_wcpay_request:ok" ){
                // 使用以上方式判断前端返回,微信团队郑重提示：
                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    this.$router.push("makeTime")
                } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                    this.$notify('取消支付');
                  } else {
                    this.$notify('支付失败');
                  }
            });
            // wx.chooseWXPay({
            //     appId:this.wxPay.appId,
            //     timestamp: this.wxPay.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            //     nonceStr: this.wxPay.nonceStr, // 支付签名随机串，不长于 32 位
            //     package: this.wxPay.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
            //     signType: this.wxPay.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            //     paySign: this.wxPay.paySign, // 支付签名
            //     success: (res)=>{
            //         // 支付成功后的回调函数
            //         this.$router.push("makeTime")
            //     },
            //     fail:(res)=>{
            //         this.$notify('支付失败');
            //     },
            //     cancel:(res)=>{
            //         this.$notify('取消支付');
            //     }
            // });
        }
    }
};
</script>
<style lang='less' scoped>
.customized {
    color: #373636;
}
.title {
    font-size: 24px;
    color: #373636;
    width: 100%;
    text-align: center;
    margin: 38px 0;
    display: inline-block;
}

.subtitle{
    font-size: 16px;
    color: #666;
    width: 100%;
    text-align: center;
    margin-top: -30px;
    margin-bottom: 30px;
}

.btnBox {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 15px;
    width: 100%;
    background: #fff;
    > div {
        width: 100%;
        span {
            color: #373636;
            font-size: 16px;
            .van-icon {
                font-size: 24px;
                vertical-align: middle;
            }
        }
        .btnmin {
            width: 247px;
            float: right;
        }
    }
}

.step {
    width: 100%;
    display: inline-block;
    position: relative;
    padding: 0 15px 80px;
}

.sex {
    .list {
        > div {
            border-radius: 7px;
            background: #f7f6f9;
            width: 100%;
            margin-top: 10px;
            display: inline-block;
            color: #373636;
            &.active {
                background: linear-gradient(
                    90deg,
                    rgba(255, 152, 0, 1),
                    rgba(255, 195, 96, 1)
                );
                color: #fff;
            }
            img {
                width: 90px;
                height: 98px;
                margin: 5px 38px;
                float: left;
            }
            > div {
                float: left;
                margin-left: 50px;
                padding-top: 33px;
                span {
                    font-size: 24px;
                }
                p {
                    font-size: 15px;
                }
            }
        }
    }
}

.family {
    ul {
        display: flex;
        flex-wrap: wrap;
        li {
            width: 70px;
            margin: 0 8px 30px;
            position: relative;
            img {
                width: 100%;
                height: 100%;
            }
            span:nth-child(1) {
                background: #f7f6f9;
                border-radius: 70px;
                display: inline-block;
                overflow: hidden;
                width: 70px;
                height: 70px;
            }
            span:nth-child(2) {
                color: #373636;
                font-size: 16px;
                width: 100%;
                text-align: center;
                display: inline-block;
            }
            &.active {
                span:nth-child(1) {
                    background: linear-gradient(
                        90deg,
                        rgba(255, 152, 0, 1),
                        rgba(255, 195, 96, 1)
                    );
                }
                i {
                    background: url("~@/assets/g.png");
                    background-size: 16px 16px;
                    width: 16px;
                    height: 16px;
                    position: absolute;
                    top: 6px;
                    right: 0;
                }
            }
        }
    }
}

.children {
    .list {
        margin-top: 40px;
        div {
            line-height: 60px;
            span {
                font-size: 16px;
                margin-left: 60px;
            }
            .van-stepper {
                line-height: 0.74667rem;
                display: inline-block;
                vertical-align: middle;
                margin-left: 100px;
            }
        }
    }
}

.shengri {
    li {
        margin-bottom: 20px;
        span {
            width: 100%;
            font-size: 18px;
            display: inline-block;
            padding-left: 20px;
        }
        span:nth-child(2) {
            margin-top: 10px;
            border-radius: 40px;
            height: 40px;
            line-height: 40px;
            background: #f7f6f9;
            padding: 0 10px 0 20px;
            color: #373636;
            font-size: 16px;
            .van-icon {
                float: right;
                margin-top: 12px;
            }
        }
    }
}

.bingshi {
    li {
        margin-top: 10px;
        border-radius: 44px;
        height: 44px;
        line-height: 44px;
        color: #373636;
        background: #f7f6f9;
        padding: 0 10px;
        font-size: 14px;
        position: relative;

        &.active {
            color: #fff;
            background: linear-gradient(
                90deg,
                rgba(255, 186, 78, 1),
                rgba(255, 138, 0, 1)
            );
            i {
                width: 20px;
                height: 20px;
                border-radius: 20px;
                background: url("~@/assets/g2.png") center center no-repeat #fff;
                background-size: 12px 9px;
                display: inline-block;
                position: absolute;
                right: 10px;
                top: 12px;
            }
        }
    }
}

.loan {
    .libg {
        background: #f7f6f9;
        border-radius: 10px;
        padding: 10px;
        margin-bottom: 20px;
    }
    h2 {
        font-size: 24px;
        padding-left: 10px;
    }
    li {
        margin-bottom: 10px;
        span {
            width: 50%;
            font-size: 18px;
            display: inline-block;
            padding-left: 20px;
        }
        span:nth-child(2) {
            width: 50%;
            margin-top: 10px;
            border-radius: 40px;
            height: 40px;
            line-height: 40px;
            color: #fff;
            background: rgba(0, 0, 0, 0.2);
            padding: 0 10px 0 20px;
            .van-icon {
                float: right;
                margin-top: 12px;
            }
        }
    }
}

.userName {
    width: 100%;
    margin-top: 10px;
    border-radius: 40px;
    height: 40px;
    line-height: 40px;
    color: #373636;
    background: #f7f6f9;
    padding: 5px 20px;
    border: none;
    font-size: 16px;
}

.popup {
    padding: 0 15px 10px 15px;
    height: 340px;
    .tit {
        height: 70px;

        span {
            font-size: 20px;
            color: #28282c;
            line-height: 70px;
            font-weight: bold;
        }
        .van-icon {
            color: rgb(151, 151, 151);
            vertical-align: middle;
            margin-top: 20px;
            float: right;
        }
    }
    .list {
        > div {
            width: 100%;
            border-radius: 5px;
            padding: 0 20px;
            box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
            margin-bottom: 10px;
            .t {
                height: 45px;
                line-height: 45px;
                display: flex;
                justify-content: space-between;
                color: #28282c;
                font-size: 16px;
            }
            .b {
                border-top: 1px solid #eeeaea;
                display: none;
                p {
                    margin: 15px 0;
                    color: #9e9a98;
                    font-size: 14px;
                }
            }

            &.active {
                border: 1px solid #ff7200;
                box-shadow: 0 0 7px rgba(251, 143, 0, 0.65);
                .t {
                    color: #ff7200;
                    font-weight: bold;
                }
                .b {
                    display: block;
                }
            }
        }
    }

    .btn {
        position: absolute;
        bottom: 10px;
        left: 15px;
    }
}
</style>
